<template>
  <div
      class="bill-detail route-page"
      :class="$store.getters.isMobile ? 'back-class' : ''"
  >
    <section class="header">
      <a-page-header title="账单详情" :class="notBack ? 'hide-back' : ''" @back="goBack(false)">
        <template #backIcon>
          <cu-icon type="org-zhangdan" v-if="isModal" style="font-size: 24px"/>
          <ArrowLeftOutlined v-else/>
        </template>
        <template #tags>
          <a-tag :color="billDetail.bill_status == 1 ? 'green' : 'red'">
            {{ billDetail.bill_status_txt }}
          </a-tag>
        </template>
        <template
            #extra
            v-if="billDetail.operateButton && billDetail.operateButton.length"
        >
          <!--关闭账单(close)+收取滞纳金(chargeFees)+编辑账单(edit)-->
          <!-- <a-space> -->
          <a-row :gutter="[8, 16]">

            <a-col
                v-if="
                billDetail.bill_type == 1 &&
                billDetail.notice_status == 0 &&
                billDetail.bill_status != 0 &&
                billDetail.settle_status != 2
              "
            >
              <a-button
                  @click="addPaymentNotice"
                  v-permission="['billList', 'auth', 'buildPaymentNotice']"
              >
                生成缴费通知单
              </a-button>
            </a-col>
            <a-col v-if="billDetail.qrcodeUrl && billDetail.bill_status != 0">
              <a-button
                  key="phonePay"
                  type="primary"
                  @click="onMakeCollections"
                  v-permission="['billList', 'auth', 'ScanCode']"
              >
                扫码支付
              </a-button>
            </a-col>
            <a-col v-if="billDetail.operateButton.includes('close')">
              <a-tooltip>
                <template v-if="billDetail?.is_confirm == 2" #title>{{
                    billDetail?.is_confirm == 2 ? "已确定的流水不可关闭" : ""
                  }}
                </template>
                <a-button
                    danger
                    key="close"
                    :disabled="billDetail?.is_confirm == 2"
                    @click="handleTopBtnClick('close')"
                >
                  关闭账单
                </a-button>
              </a-tooltip>
            </a-col>
            <a-col v-if="isBillVertify">
              <a-tooltip>
                <template #title
                >撤销申请修改账单应{{ billTypeTxt }}时间
                </template
                >
                <a-button danger @click="revokes"> 撤销申请</a-button>
              </a-tooltip>
            </a-col>
            <a-col
                v-if="
                billDetail.operateButton.includes('chargeFees') &&
                billDetail.bill_type == 1
              "
            >
              <a-button
                  key="chargeFees"
                  @click="handleTopBtnClick('chargeFees')"
                  :disabled="latefeeDisabled"
                  v-permission="['billList', 'auth', 'collectLateFee']"
              >
                调整滞纳金
              </a-button>
            </a-col>
            <a-col
                v-if="
                billDetail.operateButton.includes('settleFees') &&
                billDetail.bill_type == 1
              "
            >
              <a-dropdown
                  :disabled="latefeeDisabled"
                  v-permission="['billList', 'auth', 'collectLateFee']"
              >
                <a-button key="settleFees"> 结算滞纳金</a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="handleMatchTurnoverVisible('latefee')">
                      匹配流水
                    </a-menu-item>
                    <a-menu-item @click="addNewTurnover('latefee')">
                      添加流水
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-col>
            <a-col v-if="billDetail.split_show">
              <!--              <a-button type="primary"  @click="Splitbill(billDetail)" ghost>
                              拆分账单
                            </a-button>-->
              <a-dropdown>
                <template #overlay>
                  <a-menu @click="handleMenuMoreClick">
                    <a-menu-item key="Splitbill" :disabled="split_approval">拆分账单</a-menu-item>
                  </a-menu>
                </template>
                <a-button>
                  更多
                  <DownOutlined/>
                </a-button>
              </a-dropdown>
            </a-col>

          </a-row>

          <!-- </a-space> -->
        </template>
      </a-page-header>
      <div class="header-extra" v-if="Object.keys(billDetail).length">
        <a-row
            class="owner-info"
            :class="$store.getters.isMobile ? 'owner-padding' : ''"
        >{{ billDetail.bill_type == 1 ? "付" : "收" }}款方:
          {{ billDetail.owner_name || billDetail?.proprietor_info?.name }}
        </a-row
        >
        <a-row
            class="stais-info"
            :class="$store.getters.isMobile ? 'stais-padding' : ''"
            :gutter="[24, 12]"
            :style="{
            height: $store.getters.isMobile ? '140px' : undefined,
            overflowY: $store.getters.isMobile ? 'auto' : undefined,
          }"
        >
          <a-col :span="$store.getters.isMobile ? 12 : 3">
            <a-statistic
                title="账单状态"
                :value="SETT_STATUS_MAP[billDetail.settle_status]"
            />
          </a-col>
          <a-col :span="$store.getters.isMobile ? 12 : 3">
            <a-statistic
                :title="'应' + billTypeTxt + '金额（元）'"
                :value="billDetail.receivable_payment || 0"
            />
          </a-col>
          <a-col :span="$store.getters.isMobile ? 12 : 3" v-if="billDetail.bill_type == 1">
            <a-statistic
                :title="'实' + billTypeTxt + '金额（元）'"
                :value="billDetail.actual_payment || 0"
            />
          </a-col>
          <a-col :span="$store.getters.isMobile ? 12 : 3">
            <a-statistic
                :title="`需${billDetail.settle_status == 4 ? '付' : billTypeTxt}金额（元）`"
                :value="billDetail.actual_retreat || 0"
            />
          </a-col>

          <a-col :span="$store.getters.isMobile ? 12 : 3">
            <a-statistic :value="billDetail.receivable_payment_date">
              <template #title>
                <span>应{{ billTypeTxt }}日期</span>
                <a-popover
                    placement="top"
                    v-model:visible="editDateVisible"
                    :title="`选择新的应` + billTypeTxt + `日期`"
                    trigger="click"
                >
                  <template #content>
                    <a-form name="time_related_controls">
                      <a-form-item
                          :label="`应` + billTypeTxt + `日期`"
                          v-bind="config"
                      >
                        <a-date-picker
                            v-model:value="billDate"
                            value-format="YYYY-MM-DD"
                        />
                      </a-form-item>
                      <div class="text-right">
                        <a-button
                            style="margin-right: 8px"
                            @click="closeApproval"
                        >取消
                        </a-button
                        >
                        <a-button type="primary" @click="commitBillDate"
                        >确定
                        </a-button
                        >
                      </div>
                    </a-form>
                  </template>
                  <form-outlined
                      v-if="
                      billDetail.qrcodeUrl &&
                      billDetail.bill_status != 0 &&
                      !isBillVertify
                    "
                      @click="changeBillDate"
                      style="margin-left: 10px"
                      v-permission="['billList', 'auth', 'receiveDateModify']"
                  />
                </a-popover>
              </template>
            </a-statistic>
          </a-col>
          <a-col v-if="Number(billDetail.into_amount) > 0" :span="$store.getters.isMobile ? 12 : 3">
            <a-statistic
                title="转入金额"
                :value="billDetail.into_amount"
            />
          </a-col>
          <a-col v-if="Number(billDetail.out_amount) > 0" :span="$store.getters.isMobile ? 12 : 3">
            <a-statistic
                title="转出金额"
                :value="billDetail.out_amount"
            />
          </a-col>
          <a-col v-if="Number(billDetail.confiscations_amount) > 0"
                 :span="$store.getters.isMobile ? 12 : 3">
            <a-statistic
                title="罚没金额"
                :value="billDetail.confiscations_amount"
            />
          </a-col>
          <!--    滞纳金      -->
          <a-col :span="24"
                 v-if="billDetail.operateButton.includes('chargeFees' || 'settleFees') && billDetail.bill_type == 1">
            <a-row>
              <a-col
                  :span="$store.getters.isMobile ? 12 : 3"
              >
                <a-statistic
                    :title="'产生滞纳金'"
                    :value="billDetail.latefee_amount || 0"
                />
              </a-col>

              <a-col
                  :span="$store.getters.isMobile ? 24 : 3"
              >
                <a-statistic :value="billDetail.receivable_latefee || 0">
                  <template #title>
                    <span>应{{ billTypeTxt }}滞纳金金额</span>
                    <text-tip
                        :tips="['滞纳金=（应收金额 - 已缴金额）*拖欠时间*比例']"
                    ></text-tip>
                  </template>
                </a-statistic>
              </a-col>
              <a-col
                  :span="$store.getters.isMobile ? 24 : 3"
              >
                <a-statistic :value="billDetail.need_latefee || 0">
                  <template #title>
                    <span>需{{ billTypeTxt }}滞纳金金额</span>
                    <text-tip
                        :tips="['滞纳金=（应收金额 - 已缴金额）*拖欠时间*比例']"
                    ></text-tip>
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </section>
    <a-row>
      <a-col :span="24" style="padding:10px 12px 0px">
        <a-card :bodyStyle="{
          padding: '0'
          }">
          <a-tabs v-model:activeKey="activeKey"  @change="scrollToAnchor">
            <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.title" />
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
    <section class="content" ref="contentRef"  @scroll="handleScroll">
      <a-row :gutter="[12, 12]" id="basicInfo">
        <a-col :span="$store.getters.isMobile ? 24 : 12">
          <a-card title="账单信息">
            <a-descriptions
                :column="descCols"
                layout="vertical"
                :labelStyle="labelStyle"
                :contentStyle="contentStyle"
            >
              <a-descriptions-item label="费用类型">
                {{ billDetail.cost_type_txt }}
                <span v-if="billDetail.is_forfeit == 1" class="ml-5">
                  <a-tag color="red">罚金</a-tag>
                </span>
              </a-descriptions-item>
              <a-descriptions-item label="计费周期">
                {{ billDetail.start_date }} ~ {{ billDetail.end_date }}
              </a-descriptions-item>
              <a-descriptions-item label="账单金额（元）">
                {{ billDetail.bill_amount }}
              </a-descriptions-item>
              <a-descriptions-item label="所属公司">
              <span :class="billDetail?.org_branch_id ? 'link' : ''"
                    @click.stop="showCompany(billDetail.org_branch_id)">
                {{ billDetail?.company_branch_name || '--' }}
              </span>
              </a-descriptions-item>
              <a-descriptions-item label="创建时间">
                {{ billDetail.created_at }}
              </a-descriptions-item>
              <a-descriptions-item :label="`${billDetail.bill_type == 1 ? '付' : '收'}款方`">
                <template v-if="billDetail.owner_name || billDetail?.proprietor_info?.name">
                  <span :class="billDetail.owner_id || (billDetail?.proprietor_info?.is_new && billDetail?.proprietor_info?.id)  ? 'link' : ''" @click="toOwnerDetail">
                    {{ billDetail.owner_name || billDetail?.proprietor_info?.name }}
                  </span>
                </template>
                <span v-else>--</span>
              </a-descriptions-item>
              <a-descriptions-item label="合同编号">
                <template v-if="billDetail.contract_number">
                  <span class="link" @click="toContractDetail">
                    {{ billDetail.contract_number }}
                  </span>
                  <a-tooltip>
                    <template #title>复制</template>
                    <a-button
                        type="link"
                        @click="$utils.copyText(billDetail.contract_number)"
                    >
                      <template #icon>
                        <CopyOutlined/>
                      </template>
                    </a-button>
                  </a-tooltip>
                </template>
                <span v-else>--</span>
              </a-descriptions-item>
              <a-descriptions-item label="账单编号">
                <span>{{ billDetail.bill_number }}</span>
                <a-tooltip>
                  <template #title>复制</template>
                  <a-button
                      type="link"
                      @click="$utils.copyText(billDetail.bill_number)"
                  >
                    <template #icon>
                      <CopyOutlined/>
                    </template>
                  </a-button>
                </a-tooltip>
              </a-descriptions-item>
              <template v-if="billDetail.late_fee">
                <a-descriptions-item label="起算天数">
                  {{ billDetail.late_fee.startDay || "--" }}天
                </a-descriptions-item>
                <a-descriptions-item label="滞纳金比例">
                  {{ billDetail.late_fee.ratio || "--" }}%/天
                </a-descriptions-item>
                <a-descriptions-item label="滞纳金上限">
                  {{ billDetail.late_fee.toplimit || "--" }}%
                </a-descriptions-item>
              </template>
              <a-descriptions-item label="经办人">
                <span
                    :class="billDetail.followup_uname ? 'link' : ''"
                    @click="showUserInfo(billDetail, 'followup_uid')"
                >
                  {{ billDetail.followup_uname || "--" }}
                </span>
              </a-descriptions-item>
              <a-descriptions-item label="账单备注">
                {{ billDetail.remark || "--" }}
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>
        <a-col :span="$store.getters.isMobile ? 24 : 12" flex="auto">
          <a-card title="房源信息" style="height: 100%; display: flex; flex-direction: column"
                  :body-style="{flex: 1,display: 'flex',flexDirection: 'column'}">
            <checked-build :content="billDetail.build_bind"
                           :height="$store.getters.isMobile ? 370 : 0" :overflowYAuto="true"/>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="mt-10" id="billDetail">
        <a-col :span="24">
          <a-card title="账单明细">
            <!-- <template #extra>
              <a-button @click="billAddVisible = true">
                <template #icon>
                  <PlusOutlined />
                </template>
                添加{{ billTypeTxt }}款
              </a-button>
            </template> -->
            <a-table
                :dataSource="billList"
                :columns="BILL_LIST_COLUMNS"
                :pagination="false"
                rowKey="id"
                :customRow="customBillRow"
                :scroll="{ x: 'max-content' }"
                :class="$store.getters.isMobile ? 'footer' : ''"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'tax_rate'">
                  <span>{{ text || 0 }}</span>
                </template>
              </template>
              <template #price="{ text }">
                <span v-if="text">{{ text }}元</span>
                <span v-else>--</span>
              </template>
              <template #date="{ text }">
                <span>{{ text || "--" }} </span>
              </template>
              <template #footer>
                <div class="text-right w-100p">
                  <span>调整合计：{{ billDetail.adjust_amounts }}元</span>
                  <span style="margin-left: 20px">
                    本次结清合计: {{ billDetail.actual_payments }}元
                  </span>
                </div>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>

      <a-row class="mt-10" id="flowInfo">
        <a-col :span="24">
          <a-card>
            <template #title>
              <a-row type="flex" :gutter="[12, 6]" style="align-items: center">
                <a-col flex="1">流水信息</a-col>
                <a-col>
                  <a-checkbox
                      v-model:checked="showCanceledTurnover"
                      @change="handleTurnoverCancelShowChange"
                  >
                    显示取消匹配流水
                  </a-checkbox>
                </a-col>

                <a-col>
                  <a-tooltip>
                    <template #title v-if="!canAction">
                      当前账单已处于审批中，不可操作
                    </template>
                    <a-button
                        @click="addNewTurnover('', true)"
                        :disabled="addDisabled || !canAction"
                        v-permission="['billList', 'auth', 'createStream']"
                    >
                      <template #icon>
                        <PlusOutlined/>
                      </template>
                      收支流水
                    </a-button>
                  </a-tooltip>
                </a-col>
                <a-col>
                  <a-tooltip placement="topRight">
                    <template #title v-if="!canAction">
                      当前账单已处于审批中，不可操作
                    </template>
                    <a-button
                        @click="handleMatchTurnoverVisible('bill', true)"
                        :disabled="addDisabled || !canAction"
                        v-permission="['billList', 'auth', 'streamMatchBatch']"
                    >
                      匹配
                    </a-button>
                  </a-tooltip>
                </a-col>
              </a-row>
            </template>
            <!-- <template #extra>
              <a-space>
                <a-checkbox
                  v-model:checked="showCanceledTurnover"
                  @change="handleTurnoverCancelShowChange"
                >
                  显示取消匹配流水
                </a-checkbox>
                <a-button @click="addNewTurnover()" :disabled="addDisabled">
                  <template #icon>
                    <PlusOutlined />
                  </template>
                  收支流水
                </a-button>
                <a-button
                  @click="matchTurnoverVisible = true"
                  :disabled="addDisabled"
                >
                  匹配
                </a-button>
              </a-space>
            </template> -->
            <a-table
                :dataSource="turnoverList"
                :columns="TURNOVER_COLUMNS"
                :pagination="turnoverPagination"
                @change="handleTurnoverTableChange"
                :customRow="customTurnoverRow"
                rowKey="id"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'amount'">
                  <span>{{ text }}元</span>
                </template>
                <template v-if="column.key === 'refund_price'">
                  <span>{{ Number(text) ? text : '--' }}</span>
                </template>
                <template v-if="column.key === 'match_price'">
                  <span>{{ text }}元</span>
                </template>
                <template v-if="['income_date', 'date'].includes(column.key)">
                  <span>{{ text || "--" }} </span>
                </template>
                <template v-if="column.key === 'action'">
                  <a-tooltip
                      v-if="
                      record.match_status == 1 ||
                      record.match_status == 3 ||
                      record.is_confirm == 2
                    "
                  >
                    <template #title>{{
                        record?.is_confirm == 2
                            ? "流水已确认，不可取消匹配"
                            : "取消匹配"
                      }}
                    </template>
                    <a-button
                        type="link"
                        danger
                        :disabled="record?.is_confirm == 2 || billDetail.bill_status != 1"
                        @click.stop="handleTurnoverMatchCancel(record)"
                        v-permission="['billList', 'auth', 'cancelMatch']"
                    >
                      <template #icon>
                        <DisconnectOutlined/>
                      </template>
                    </a-button>
                  </a-tooltip>
                  <span v-else>--</span>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="mt-10" id="billAdjustment">
        <a-col :span="24">
          <a-card title="账单调整">
            <template #extra>
              <a-space>
                <a-checkbox
                    v-model:checked="showCanceledAdjust"
                    @change="handleAdjustCancelShowChange"
                >
                  显示作废调整
                </a-checkbox>
                <a-tooltip placement="topRight">
                  <template #title v-if="!canAction">
                    当前账单已处于审批中，不可操作
                  </template>
                  <a-button
                      @click="adjustAddVisible = true"
                      :disabled="disabledAdjust || !canAction"
                      v-permission="['billList', 'auth', 'addAdjust']"
                  >
                    <template #icon>
                      <PlusOutlined/>
                    </template>
                    调整
                  </a-button>
                </a-tooltip>
              </a-space>
            </template>
            <a-table
                :dataSource="adjustList"
                :columns="ADJUST_LIST_COLUMNS"
                :pagination="adjustPagination"
                @change="handleAdjustTableChange"
                rowKey="id"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'cancel_adjust_date'">
                  <span>{{ text || "--" }} </span>
                </template>
                <template v-if="column.key === 'files_num'">
                  <span @click="attachment(record.id)" v-if="text > 0"
                        style="cursor: pointer;color: #54a4ef;">{{ text }} </span>
                  <span v-else>--</span>
                </template>
                <template v-if="column.key === 'adjust_status_txt'">
                  <span
                      v-if="
                      record.approval_status == 1 || record.approval_status == 3
                    "
                      :style="{
                      color:
                        record.approval_status == 1 ? '#fd1e1e' : '#faad14',
                    }"
                  >
                    {{ record.approval_status_txt }}
                  </span>
                  <span
                      v-else
                      :style="{
                      color: record.adjust_status == 2 ? '#87d068' : '',
                    }"
                  >
                    {{ text }}
                  </span>
                </template>
                <template v-if="column.key === 'action'">
                  <a-tooltip
                      v-if="record.adjust_status == 2 && canCancelAdjust"
                  >
                    <template #title>作废</template>
                    <a-button
                        type="link"
                        danger
                        @click.stop="handleAdjustRemove(record)"
                    >
                      <template #icon>
                        <DeleteOutlined/>
                      </template>
                    </a-button>
                  </a-tooltip>
                  <span v-else>--</span>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
      <!--   结转列表   -->
      <CarryOverCard
          id="billTransfer"
          v-if="billDetail.bill_type != 2"
          :billId="billId"
          :refreshKey="refreshKey"
          :billDetail="billDetail"
      />
      <a-row class="mt-10" v-if="billDetail.expense_type != 2" id="invoiceRecord">
        <a-col :span="24">
          <a-card title="发票记录">
            <template #extra>
              <a-tooltip placement="topRight">
                <template #title v-if="!canActionInvoice">
                  <div v-if="settleStatus4">待退款不可开具发票</div>
                  <div v-else>当前账单已处于审批中，不可操作</div>
                </template>
                <a-button
                    v-if="billDetail.bill_type == 1"
                    @click="makeInvoice"
                    :disabled="makeInvoiceDisabled || !canActionInvoice"
                    v-permission="['billList', 'auth', 'build']"
                >
                  <template #icon>
                    <PlusOutlined/>
                  </template>
                  开具发票
                </a-button>
              </a-tooltip>
            </template>
            <a-table
                :dataSource="invoiceList"
                :columns="INVOICE_LIST_COLUMNS"
                :pagination="false"
                rowKey="id"
                :class="$store.getters.isMobile ? 'footer' : ''"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'invoice_status_txt'">
                  {{ text }}
                </template>
                <template v-if="column.key === 'action'">
                  <a-button type="link" @click="invoiceDetail(text)"
                  >查看详情
                  </a-button
                  >
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="mt-10" v-if="billDetail.bill_type == 1" id="receiptRecord">
        <a-col :span="24">
          <a-card title="收据记录">
            <template #extra>
              <!-- :disabled="makeInvoiceDisabled"
                v-if="billDetail.bill_type == 1" -->
              <a-tooltip placement="topRight">
                <template #title v-if="!canActionInvoice">
                  <div v-if="settleStatus4">待退款不可开具收据</div>
                  <div v-else>当前账单已处于审批中，不可操作</div>
                </template>
                <a-button
                    @click="makeReceipt"
                    :disabled="makeReceiptDisabled || !canActionInvoice"
                    v-permission="['billList', 'auth', 'receiptBuild']"
                >
                  <template #icon>
                    <PlusOutlined/>
                  </template>
                  开具收据
                </a-button>
              </a-tooltip>
            </template>
            <a-table
                :dataSource="receiptList"
                :columns="RECEIPT_LIST_COLUMNS"
                :pagination="false"
                rowKey="id"
                :class="$store.getters.isMobile ? 'footer' : ''"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'action'">
                  <a-button type="link" @click="receipteDetail(record)">
                    查看详情
                  </a-button>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="mt-10" id="attachmentInfo">
        <a-col :span="24">
          <attachment-info
              :params="attachParams"
              typeFrom="bill"
              @getObjectId="getObjectId"
              :disabled="billDetail.bill_status == 0"
          ></attachment-info>
        </a-col>
      </a-row>
      <a-row class="mt-10" id="memoInfo">
        <a-col :span="24">
          <a-card title="备注信息">
            <template #extra>
              <a-button
                  @click="handleRemarkEdit()"
                  :disabled="billDetail.bill_status == 0"
                  v-permission="['billList', 'auth', 'remark']"
              >
                <template #icon>
                  <PlusOutlined/>
                </template>
                添加备注
              </a-button>
            </template>
            <a-table
                :dataSource="remarkList"
                :columns="REMARK_LIST_COLUMNS"
                :pagination="remarkPagination"
                @change="handleRemarkTableChange"
                rowKey="id"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'action'">
                  <a-tooltip>
                    <template #title>编辑</template>
                    <a-button type="link" @click="handleRemarkEdit(record)">
                      <template #icon>
                        <FormOutlined/>
                      </template>
                    </a-button>
                  </a-tooltip>
                  <a-tooltip>
                    <template #title>删除</template>
                    <a-button
                        type="link"
                        danger
                        @click="handleRemarkRemove(record)"
                    >
                      <template #icon>
                        <DeleteOutlined/>
                      </template>
                    </a-button>
                  </a-tooltip>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="mt-10" id="operationRecord">
        <a-col :span="24">
          <a-card title="操作记录">
            <a-table
                :dataSource="optLogList"
                :columns="OPT_LOG_LIST_COLUMNS"
                :pagination="optLogPagination"
                @change="handleOptLogTableChange"
                rowKey="id"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'log_content'">
                  <span v-if="record.operate_type == 'bill_split' && record.operate_content">
                    该账单由
                    <span
                        v-if="record.operate_content.original_id != record.operate_content.bill_id"
                        @click="handleViewRelevanceBill(record.operate_content.original_id)"
                        style="color: #57a4ff;cursor: pointer;">
                      [{{ record.operate_content.bill_number }}]
                    </span>
                    拆分而来，拆分付款周期为{{ record.pay_month }}个月一付
                    <span style="color: #57a4ff;cursor: pointer;"
                          @click="handleViewApproval(record)">【查看审批】</span>
                  </span>
                  <span v-else>
                    {{ text || '--' }}
                    <span class="link" v-if="record.approval_url"
                          @click.stop="handleViewApproval(record)">查看审批</span>
                    <span class="link" v-if="record.relation_bill"
                          @click.stop="handleViewRelevanceBill(record.relation_bill)">查看关联账单</span>
                  </span>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </section>
    <!-- 匹配流水 -->
    <match-turnover
        :cost_type="billDetail.cost_type"
        :village_id="billDetail.village_id"
        :visible="matchTurnoverVisible"
        :ownerInfo="ownerInfo"
        :type="matchTurnoverType"
        @cancel="matchTurnoverVisible = false"
        @success="handleTurnoverMatchSuccess"
    ></match-turnover>
    <!-- 新建子账单 -->
    <sub-bill-add
        :visible="billAddVisible"
        :content="billDetail"
        @cancel="billAddVisible = false"
        @success="handleSubBillAddSuccess"
    ></sub-bill-add>
    <!-- 子账单详情 -->
    <sub-bill-detail
        :visible="billDetailVisible"
        :id="billDetailId"
        @cancel="billDetailVisible = false"
    ></sub-bill-detail>
    <!-- 添加备注 -->
    <add-remark
        :visible="remarkAddVisible"
        :content="remarkEditContent"
        @cancel="remarkAddVisible = false"
        @success="handleRemarkAddSuccess"
    ></add-remark>
    <!-- 取消匹配 -->
    <cancel-match
        :visible="cancelMatchVisible"
        :content="cancelMatchContent"
        @cancel="cancelMatchVisible = false"
        @success="handleMatchCancelSuccess"
    ></cancel-match>
    <!-- 新建调整 -->
    <add-adjust
        :visible="adjustAddVisible"
        :initData="billDetail.adjustInit"
        @cancel="adjustAddVisible = false"
        @success="handleAdjustAddSuccess"
    ></add-adjust>
    <!-- 作废调整 -->
    <remove-adjust
        :visible="removeAdjustVisible"
        :id="removeAdjustId"
        @cancel="removeAdjustVisible = false"
        @success="handleAdjustAddSuccess"
    ></remove-adjust>
    <!-- 备注弹窗 -->
    <a-modal
        v-model:visible="showModal"
        :title="modalTitle"
        centered
        @cancel="onModalClose"
        @ok="onModalSubmit"
        :width="600"
    >
      <a-textarea
          v-if="modalType == 'close'"
          :placeholder="'请输入' + modalTitle"
          :auto-size="{ minRows: 6 }"
          v-model:value="modalRemarkContent"
      />
      <!-- 调整滞纳金弹窗 -->
      <template v-if="modalType == 'chargeFees'">
        <a-form layout="vertical">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="产生滞纳金">
                <a-input-number
                    class="w-100p"
                    :value="billDetail.latefee_amount"
                    disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="应收滞纳金">
                <a-input-number
                    class="w-100p"
                    v-model:value="chargeFeesMoney"
                    placeholder="请输入应收滞纳金额"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </template>
    </a-modal>

    <a-modal
        v-model:visible="annex"
        title="附件列表"
        centered
        @cancel="annex = false"
        :footer="null"
        :width="800"
    >
      <a-table
          :dataSource="files"
          :columns="devicecolumns"
          :pagination="false"
          row-key="id"
          :scroll="{ x: 'max-content' }"
      >
        <template #bodyCell="{ text, record, column }">
          <template v-if="column.key === 'file_name'">
            {{ record.file_name }}
          </template>
          <template v-if="column.key === 'file_url'">
            <div style="width: 300px;text-align: left;">
              {{ text }}
            </div>
          </template>
          <template v-if="column.key === 'receive'">
            <a-tooltip>
              <template #title>在线预览</template>
              <a-button v-if="record.file_url && !(record.file_url.indexOf('.doc') != -1 || record.file_url.indexOf('.docx') != -1
                                  || record.file_url.indexOf('.pdf') != -1 || record.file_url.indexOf('.xlsx') != -1)"
                        type="link" @click="previewClick(record)">
                <template #icon>
                  <EyeOutlined/>
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip>
              <template #title>下载</template>
              <a-button
                  v-if="record.file_url && !(record.file_url.indexOf('.jpg') != -1 || record.file_url.indexOf('.jpeg') != -1 || record.file_url.indexOf('.png') != -1)"
                  type="link" @click="downloadFile(record.file_url)">
                <template #icon>
                  <DownloadOutlined/>
                </template>
              </a-button>
            </a-tooltip>
          </template>
        </template>
      </a-table>
    </a-modal>

    <!-- 发起收款 -->
    <MakeCollections
        :visible="collectVisible"
        collectionType="multiple"
        :ownerInfo="ownerInfo"
        :roomDetail="roomDetail"
        :billIds="[billId]"
        @cancel="collectVisible = false"
        @success="onCollectionsSuccess"
        from="detailScan"
    />

    <add-notice
        @closeDrawer="addNoticeClose"
        @success="addNoticeSuccess"
        :visible="addNoticeVisible"
        :ids="[billId]"
    >
    </add-notice>

    <UserDetail
        @request="$utils.commonRequest"
        :visible="userVisible"
        :uid="userId"
        :coordinateData="coordinateData"
        @cancel="userVisible = false"
    />

    <AddCompany
        :visible="addCompanyVisible"
        :id="editCompanyId"
        :isDetail="true"
        @handleCancel="addCompanyVisible = false"
    />

    <PreviewImg
        :visible="imgVisible"
        :index="0"
        :list="imgList"
        @close="imgVisible = false"
    />

    <electronContractModal
        :visible="electronContractVisible"
        :esignDetail="{ esignCheck: true }"
        @close="electronContractVisible = false"
        @refresh="electronContractVisible = false"
        type="contractDetail"
        title="在线预览"
        :urlData="previewUrlData"
    />

    <!--  添加收支流水  -->
    <AddBillTurnoverDrawer
        :visible="addBillTurnoverVisible"
        :ownerId="ownerInfo?.id || ''"
        :queryBillId="addBillTurnoverBillId"
        :queryBillType="addBillTurnoverType"
        @handleClose="handleAddTurnoverClose"
        @handleSuccess="saveAddTurnover"
    />


    <!-- 原路退回 -->
    <RefundBillBackModal
        :visible="refundBackVisible"
        :actionType="refundBackActionType"
        :amount="refundBackAmount"
        :billId="billId"
        @handleCancel="handleRefundBackCancel"
        @handleAction="handleRefundBackNext"
    />

    <splitbill
        v-if="Splitbilltype"
        :visible="Splitbilltype"
        :content="contentbill"
        @cancel="cancelsplitbill"
    />

    <!--  关联账单详情  -->
    <BillDetailDrawer
        :visible="relationBillVisible"
        :id="relationBillId"
        @cancel="handleCloseRelationBill"
    />

    <!--  合同详情  -->
    <ContractDetailDrawer
        :visible="contractDetailVisible"
        :id="contractDetailId"
        @handleCancel="
        () => {
          contractDetailVisible = false;
        }
      "
        @closeAllModal="closeAllModal"
    />

    <!-- 租客详情 -->
    <OwnerDetailDrawer
        :visible="ownerDetailVisible"
        :id="ownerId"
        @cancel="
        () => {
          ownerDetailVisible = false;
        }
      "
    />

    <!--  收支流水详情  -->
    <TurnoverDetailDrawer
        :visible="turnoverDetailVisible"
        :id="turnoverDetailId"
        @handleCancel="
        () => {
          turnoverDetailVisible = false;
        }
      "
    />

  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  createVNode,
  ref, defineAsyncComponent,
} from "vue";
import {useRoute, useRouter} from "vue-router";
import request from "../../../common/utils/request";
import {TextTip, UserDetail} from "bl-common-vue3";
import CheckedBuild from "../../../components/contract/CheckedBuild/index.vue";
import MatchTurnover from "./modules/MatchTurnover.vue";
import SubBillAdd from "./modules/AddBill.vue";
import SubBillDetail from "./modules/BillDetail.vue";
import AttachmentInfo from "../../../components/contract/AttachmentInfo/index.vue";
import AddRemark from "./modules/AddRemark.vue";
import CancelMatch from "./modules/CancelMatch.vue";
import AddAdjust from "./modules/AddAdjust.vue";
import RemoveAdjust from "./modules/RemoveAdjust.vue";
import QrcodeVue from "qrcode.vue";
import AddNotice from "../AllBills/AddNotice.vue";
import {
  CopyOutlined,
  PlusOutlined,
  DisconnectOutlined,
  DeleteOutlined,
  FormOutlined,
  ExclamationCircleOutlined,
  QuestionCircleOutlined,
  ArrowLeftOutlined, EyeOutlined, DownloadOutlined, DownOutlined,
} from "@ant-design/icons-vue";
import store from "../../../store";
import utils from "../../../common/utils/utils";
import {message, Modal, notification} from "ant-design-vue";
import BLCOMMON from "bl-common-vue3";
import {PreviewImg} from "bl-common-vue3";
import electronContractModal from "@/components/ElectronContractModal/index.vue";
import MakeCollections from "@/views/bill/NewBill/modules/MakeCollections.vue";
import _ from "lodash";
import AddCompany from "@/views/setting/CompanyInfo/modules/AddCompany.vue";

const ContractDetailDrawer = defineAsyncComponent(() =>
    import("@/views/contract/ContractDetail/ContractDetailDrawer.vue")
);
const OwnerDetailDrawer = defineAsyncComponent(() =>
    import("@/views/village/OwnerManage/modules/OwnerDetailDrawer.vue")
);

const TurnoverDetailDrawer = defineAsyncComponent(() =>
    import("@/views/bill/TurnoverDetail/modules/TurnoverDetailDrawer.vue")
);

const devicecolumns = [
  {
    title: "名称",
    dataIndex: "file_name",
    key: "file_name",
    align: "center",
  },
  {
    title: "网址",
    dataIndex: "file_url",
    key: "file_url",
    align: "center",
    width: 300,
  },
  {
    title: "操作",
    dataIndex: "receive",
    key: "receive",
    align: "center",
  },
];
import splitbill from "@/views/bill/BillDetail/modules/Splitbill.vue";

const AddBillTurnoverDrawer = defineAsyncComponent(() =>
    import("@/views/bill/BillTurnover/modules/AddBillTurnoverDrawer.vue")
);
import CarryOverCard from "@/views/bill/BillDetail/modules/CarryOverCard.vue";
import NoHistoryIframe from "@/views/contract/ContractDetail/modules/NoHistoryIframe.vue";
import RefundBillBackModal from "@/views/bill/BillDetail/modules/RefundBillBackModal.vue";

const BillDetailDrawer = defineAsyncComponent(() =>
    import("@/views/bill/BillDetail/modules/BillDetailDrawer.vue")
);
export default defineComponent({
  name: "billDetail",
  props: {
    // 展示方式 modal page
    showType: {
      type: String,
      default: "page",
    },
    // showType=modal 必传
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {
    DownOutlined,
    DownloadOutlined,
    EyeOutlined,
    NoHistoryIframe,
    AddCompany,
    MakeCollections,
    TextTip,
    CheckedBuild,
    MatchTurnover,
    SubBillAdd,
    SubBillDetail,
    AttachmentInfo,
    AddRemark,
    CancelMatch,
    AddAdjust,
    RemoveAdjust,
    QrcodeVue,
    CopyOutlined,
    PlusOutlined,
    DisconnectOutlined,
    DeleteOutlined,
    FormOutlined,
    AddNotice,
    ArrowLeftOutlined,
    UserDetail,
    PreviewImg,
    electronContractModal,
    AddBillTurnoverDrawer,
    splitbill,
    BillDetailDrawer,
    CarryOverCard,
    RefundBillBackModal,
    ContractDetailDrawer,
    OwnerDetailDrawer,
    TurnoverDetailDrawer,
  },
  setup(props, {emit}) {
    const $route = useRoute();
    const $router = useRouter();
    const notBack = $route.query.noBack;
    const goBack = (close = true) => {
      if (isModal.value) {
        if (close) {
          emit("cancel");
        }
      } else {
        if (window.history.state.back) {
          $router.back();
        } else {
          $router.replace({
            name: "billList",
          });
        }
      }
    };
    const state = reactive({
      billId: Number($route.query.billId),
      showModal: false,
      modalType: false,
      modalTitle: "",
      modalRemarkContent: "",
      chargeFeesMoney: "",
      settleFeesMoney: "",
      // 账单详情
      billDetail: {},
      // 账单明细
      billList: [],
      billAddVisible: false,
      billDetailVisible: false,
      billDetailId: 0,
      // 发票记录
      invoiceList: [],
      // 收据记录
      receiptList: [],
      receipt_amount_total: 0,
      // 匹配流水
      addDisabled: false,
      showCanceledTurnover: false,
      turnoverPage: 1,
      turnoverLimit: 10,
      turnoverTotal: 0,
      turnoverList: [],
      matchTurnoverVisible: false,
      matchTurnoverType: "bill",
      billTypeTxt: "",
      cancelMatchVisible: false,
      cancelMatchContent: {},
      // 调整信息
      showCanceledAdjust: false,
      adjustPage: 1,
      adjustLimit: 10,
      adjustTotal: 0,
      adjustList: [],
      adjustAddVisible: false,
      removeAdjustVisible: false,
      removeAdjustId: 0,
      // 附件信息
      attachParams: {
        type: 1,
        source_id: Number($route.query.billId),
      },
      // 备注信息
      remarkPage: 1,
      remarkLimit: 10,
      remarkTotal: 0,
      remarkList: [],
      remarkAddVisible: false,
      remarkEditContent: {},
      // 操作记录
      optLogPage: 1,
      optLogLimit: 10,
      optLogTotal: 0,
      optLogList: [],
      // 滞纳金
      latefeeDisabled: false,
      userVisible: false,
      userId: 0,
      coordinateData: {},
      isSendMessage: false,

      ownerInfo: {},
      // 修改账单时间
      editDateVisible: false,
      isBillVertify: false, //修改应收日期是不是在审核中
      billDate: "",
      collectVisible: false,
      roomDetail: {},
      addCompanyVisible: false,
      editCompanyId: 0,
      Pending_approval: false,
      split_approval: false,
      annex: false,
      files: [],
      imgVisible: false,
      imgList: '',
      electronContractVisible: false,
      addBillTurnoverVisible: false,
      addBillTurnoverBillId: 0,
      addBillTurnoverType: '',
      refreshKey: 0,
      refundBackVisible: false,
      refundBackActionType: '',
      refundBackAmount: 0,
      Splitbilltype: false,
      contentbill: {},
      relationBillId: 0,
      relationBillVisible: false,
      // 合同详情
      contractDetailVisible: false,
      contractDetailId: 0,
      // 租客详情
      ownerDetailVisible: false,
      ownerId: 0,
      // 收支流水详情
      turnoverDetailVisible: false,
      turnoverDetailId: 0,

      activeKey: 'basicInfo',
      tabList:[
        {
          title:'基本信息',
          key: 'basicInfo'
        },
        {
          title:'账单明细',
          key: 'billDetail'
        },
        {
          title:'流水信息',
          key: 'flowInfo'
        },
        {
          title:'账单调整',
          key: 'billAdjustment'
        },
        {
          title:'账单结转',
          key: 'billTransfer'
        },
        {
          title:'发票记录',
          key: 'invoiceRecord'
        },
        {
          title:'收据记录',
          key: 'receiptRecord'
        },
        {
          title:'附件信息',
          key: 'attachmentInfo'
        },
        {
          title:'备注信息',
          key: 'memoInfo'
        },
        {
          title:'操作记录',
          key: 'operationRecord'
        }
      ]
    });

    const isModal = computed(() => props.showType == "modal");
    const canCancelAdjust = BLCOMMON.utils.getBtnPermission([
      "billList",
      "auth",
      "cancelAdjust",
    ]);

    const settleStatus4 = computed(() => {
      return state.billDetail.settle_status == 4;
    });

    const canAction = computed(() => {
      return !state.Pending_approval && !state.split_approval;
    });

    const canActionInvoice = computed(() => {
      return !settleStatus4.value && !state.Pending_approval && !state.split_approval;
    });

    const disabledAdjust = computed(() => {
      return state.billDetail?.bill_status == 0;
    });

    // 收支流水
    const handleTurnoverCancelShowChange = () => {
      state.turnoverPage = 1;
      getCurrentTurnover();
    };
    const turnoverPagination = computed(() => ({
      total: state.turnoverTotal,
      current: state.turnoverPage,
      pageSize: state.turnoverLimit,
      showSizeChanger: true,
    }));
    const handleTurnoverTableChange = (pager) => {
      state.turnoverPage = pager.current;
      state.turnoverLimit = pager.pageSize;
      getCurrentTurnover();
    };
    const getCurrentTurnover = () => {
      const params = {
        page: state.turnoverPage,
        limit: state.turnoverLimit,
        bill_id: state.billId,
      };
      if (state.showCanceledTurnover) {
        params.match_status = 4;
      }
      request.get("/org", "/bill/getBillStreamList", params).then((res) => {
        state.turnoverList = res.list;
        state.turnoverTotal = res.total;
      });
    };

    const textapproval = () => {
      request.get("/org", "/bill/bill_approval", {
        id: state.billId
      }).then((res) => {
        state.Pending_approval = res.info
      });
    }

    const handleMatchTurnoverVisible = (type = "bill", isVerify = false) => {
      const goNext = () => {
        state.matchTurnoverType = type;
        state.matchTurnoverVisible = true;
      };
      if (isVerify) {
        request.post("/org", "/billTransfer/hasRefundAmount", {bill_id: state.billId}).then((res) => {
          if (res?.amount > 0) {
            state.refundBackAmount = res.amount;
            state.refundBackActionType = 'streamMatchBatch';
            state.refundBackVisible = true;
          } else {
            goNext();
          }
        })
      } else {
        goNext();
      }

    };
    // 取消匹配
    const handleTurnoverMatchCancel = (record) => {
      // 取消匹配前置验证
      request
          .get("/org", "/stream/beforeValidate", {bill_id: state.billId})
          .then((res) => {
            state.cancelMatchContent = record;
            state.cancelMatchContent.receiptListNumber = state.receiptList.length;
            state.cancelMatchVisible = true;
          })
          .catch((err) => {
            // console.log("err", err);
            if (err.code == 70027) {
              Modal.confirm({
                title: "提醒",
                content: err.msg || "当前账单已开据收据,请谨慎进行操作",
                icon: () => createVNode(ExclamationCircleOutlined),
                centered: true,
                okText: () => "继续",
                onOk() {
                  state.cancelMatchContent = record;
                  state.cancelMatchContent.receiptListNumber =
                      state.receiptList.length;
                  state.cancelMatchVisible = true;
                },
                cancelText: () => "取消",
                onCancel() {
                },
              });
            }
          });
    };
    const handleMatchCancelSuccess = () => {
      state.cancelMatchVisible = false;
      handleTurnoverCancelShowChange();
      getBillDetail();
      getOptLogList();
    };

    // 添加新的收支流水
    const addNewTurnover = (type, isVerify = false) => {
      const goNext = () => {
        state.addBillTurnoverBillId = state.billId;
        state.addBillTurnoverType = type;
        state.addBillTurnoverVisible = true;
      };
      if (isVerify) {
        request.post("/org", "/billTransfer/hasRefundAmount", {bill_id: state.billId}).then((res) => {
          if (res?.amount > 0) {
            state.refundBackAmount = res.amount;
            state.refundBackActionType = 'createStream';
            state.refundBackVisible = true;
          } else {
            goNext();
          }
        })
      } else {
        goNext();
      }

    };
    const handleTurnoverMatchSuccess = () => {
      state.matchTurnoverVisible = false;
      state.matchTurnoverType = "bill";
      state.turnoverPage = 1;
      getCurrentTurnover();
      getBillDetail();
      getOptLogList();
      textapproval()
    };

    const customTurnoverRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => {
          if (record.stream_id) {
            state.turnoverDetailId = record.stream_id;
            state.turnoverDetailVisible = true;
          }
        },
      };
    };

    // 添加新的子账单
    const handleSubBillAddSuccess = () => {
      getBillDetail();
      state.billAddVisible = false;
    };
    const customBillRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => {
          state.billDetailId = record.id;
          state.billDetailVisible = true;
        },
      };
    };

    // 调整列表
    const handleAdjustCancelShowChange = () => {
      state.adjustPage = 1;
      getAdjustList();
    };
    const adjustPagination = computed(() => ({
      total: state.adjustTotal,
      current: state.adjustPage,
      pageSize: state.adjustLimit,
      showSizeChanger: true,
    }));
    const handleAdjustTableChange = (pager) => {
      state.adjustPage = pager.current;
      state.adjustLimit = pager.pageSize;
      getAdjustList();
    };
    const handleAdjustAddSuccess = () => {
      state.adjustAddVisible = false;
      state.removeAdjustVisible = false;
      handleAdjustCancelShowChange();
      getBillDetail();
      getOptLogList();
    };
    const handleAdjustRemove = (record) => {
      state.removeAdjustId = record.id;
      state.removeAdjustVisible = true;
    };
    const getAdjustList = () => {
      const params = {
        bill_id: state.billId,
        page: state.adjustPage,
        limit: state.adjustLimit,
      };
      if (state.showCanceledAdjust) {
        params.adjust_status = 4;
      }
      request.get("/org", "/bill/getAdjustList", params).then((res) => {
        state.adjustList = res.list;
        state.adjustTotal = res.total;
      });
    };

    // 附件信息
    const getObjectId = (id) => {
      state.attachParams.object_id = id;
    };

    // 备注信息
    const remarkPagination = computed(() => ({
      total: state.remarkTotal,
      current: state.remarkPage,
      pageSize: state.remarkLimit,
      showSizeChanger: true,
    }));
    const handleRemarkTableChange = (pager) => {
      state.remarkPage = pager.current;
      state.remarkLimit = pager.pageSize;
      getRemarkList();
    };
    const handleRemarkAddSuccess = () => {
      state.remarkAddVisible = false;
      state.remarkPage = 1;
      getRemarkList();
    };
    const handleRemarkEdit = (record) => {
      state.remarkEditContent = record || {};
      state.remarkAddVisible = true;
    };
    const handleRemarkRemove = (record) => {
      utils.modalConfirm({
        content: "确认删除此条备注吗？",
        okType: "danger",
        onOk: () => {
          request
              .del("/org", "/bill/delRemark", {
                remark_id: record.id,
                needMsg: true,
              })
              .then((res) => {
                message.success(res.msg || "删除成功!");
                handleRemarkAddSuccess();
              });
        },
      });
    };
    const getRemarkList = () => {
      request
          .get("/org", "/bill/remark", {
            bill_id: state.billId,
            page: state.remarkPage,
            limit: state.remarkLimit,
          })
          .then((res) => {
            state.remarkList = res.list;
            state.remarkTotal = res.total;
          });
    };

    // 操作日志
    const optLogPagination = computed(() => ({
      total: state.optLogTotal,
      current: state.optLogPage,
      pageSize: state.optLogLimit,
      showSizeChanger: true,
    }));
    const handleOptLogTableChange = (pager) => {
      state.optLogPage = pager.current;
      state.optLogLimit = pager.pageSize;
      getOptLogList();
    };
    const getOptLogList = () => {
      request
          .get("/org", "/bill/logerList", {
            bill_id: state.billId,
            page: state.optLogPage,
            limit: state.optLogLimit,
          })
          .then((res) => {
            state.optLogList = res.list;
            state.optLogTotal = res.total;
          });
    };

    // 发票
    const makeInvoiceDisabled = computed(() => {
      const {billDetail} = state;
      return (
          billDetail.bill_status == 0 ||
          (Number(billDetail.advanceAmount) ==
              Number(billDetail.actual_retreat) + Number(billDetail.need_latefee) &&
              Number(billDetail.actualAmount) ==
              Number(billDetail.actual_payment) +
              Number(billDetail.actual_latefee))
      );
    });
    // 收据
    const makeReceiptDisabled = computed(() => {
      const {billDetail} = state;
      return (
          billDetail.bill_status == 0 ||
          Number(state.receipt_amount_total) >=
          Number(billDetail.receivable_payment)
      );
    });

    const makeInvoice = () => {
      request
          .post("/org", "/invoice/beforeVerify", {
            billIds: [state.billId],
          })
          .then(() => {
            $router.push({
              name: "makeInvoice",
              query: {billIds: state.billId},
            });
          })
          .catch((err) => {
            if (err.code >= 50020) {
              if (err.code == 50020 || err.code == 50021) {
                const msg =
                    err.code == 50021
                        ? "费用类型未设置税率信息"
                        : "未配置对应楼宇的发票模板";
                Modal.confirm({
                  title: () => "提示",
                  content: () => err?.msg || `当前账单${msg}，请先前往配置~`,
                  icon: () => createVNode(ExclamationCircleOutlined),
                  centered: true,
                  okText: () => "前往配置",
                  onOk() {
                    $router.push({
                      name: "InvoiceSetting",
                      query: {billIds: state.billId, type: "template"},
                    });
                  },
                });
              } else if (err.code == 50022) {
                Modal.confirm({
                  title: () => "提示",
                  content: () => `当前账单未匹配适用模板,是否继续进行开票？`,
                  icon: () => createVNode(QuestionCircleOutlined),
                  centered: true,
                  onOk() {
                    $router.push({
                      name: "makeInvoice",
                      query: {billIds: state.billId},
                    });
                  },
                });
              } else {
                notification.warning({
                  message: "警告",
                  description: err.msg,
                });
              }
            }
          });
    };
    const invoiceDetail = (group_key) => {
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetChildDrawerList",
          info: {
            props: {
              title: null,
              closable: false,
              maskClosable: true,
              visible: true,
              width: 1000,
              bodyStyle: {
                height: '100%',
                boxSizing: 'border-box',
                overflowY: 'auto',
                background: '#ffffff'
              },
              destroyOnClose: true,
            },
            heightFull: true,
            microId: `org_bill_invoiceDetail`,
            app: 'org',
            url: `/bill/invoiceDetail?group_key=${group_key}&noBack=1`,
            params: {
              isMainDrawer: true,
              closeDrawer: (isBack) => {
                if(isBack){
                  getBillDetail()
                }
              }
            }
          }
        })
      } else {
        $router.push({
          name: "invoiceDetail",
          query: { group_key },
        });
      }

    };

    // 顶部操作按钮点击
    const handleTopBtnClick = (type) => {
      if (type == "close" && state.turnoverList.length > 0) {
        message.warn("请先取消匹配所有流水信息");
        return;
      }
      state.modalTitle = topBtnMap[type].title;
      state.modalType = type;
      state.showModal = true;
    };

    const onModalSubmit = () => {
      let value = state[topBtnMap[state.modalType].stateKey]
      if (value !== 0 && !value) {
        message.warning(`请输入${state.modalTitle}!`);
        return;
      }
      topBtnMap[state.modalType].submit();
    };
    const onModalClose = () => {
      state.showModal = false;
      state[topBtnMap[state.modalType].stateKey] = "";
      state.modalType = "";
      state.modalTitle = "";
    };
    const topBtnMap = {
      close: {
        title: "关闭账单原因",
        stateKey: "modalRemarkContent",
        submit: () => {
          // cost_18电费 cost_19水费
          // expense_type = 4 代表是水电过来的账单  才请求水电关闭接口
          if (
              state.billDetail.attribute == "energy" &&
              state.billDetail.expense_type == 4
          ) {
            request
                .put("/work_energy", "/energy/bill/close", {
                  bill_number: state.billDetail.bill_number,
                  remark: state.modalRemarkContent,
                })
                .then((res) => {
                  message.success(res.msg || "操作成功");
                  onModalClose();
                  init();
                });
          } else {
            request
                .post("/org", "/bill/close", {
                  bill_id: state.billId,
                  needMsg: true,
                  remark: state.modalRemarkContent,
                })
                .then((res) => {
                  message.success(res.msg || "操作成功");
                  onModalClose();
                  init();
                });
          }
        },
      },
      chargeFees: {
        title: "调整滞纳金",
        stateKey: "chargeFeesMoney",
        submit: () => {
          request
              .put("/org", "/bill/collectLateFee", {
                bill_id: state.billId,
                needMsg: true,
                late_fee: state.chargeFeesMoney,
              })
              .then((res) => {
                message.success(res.msg || "操作成功");
                onModalClose();
                init();
              });
        },
      },
    };

    // 获取订单详情
    const getBillDetail = () => {
      request
          .get("/org", "/bill/detail", {
            bill_id: state.billId,
          })
          .then((res) => {
            const {detail} = res;
            state.billDetail = detail;
            state.billList = detail.subbillList;
            state.invoiceList = detail.invoiceList;
            state.receiptList = detail.receiptList;
            state.disabledCombine = false;
            state.billDate = detail.receivable_payment_date;
            let total = 0;
            state.receiptList.forEach((item, index) => {
              if (item?.status != 5) {
                // 非已作废的
                total = (Number(total) + Number(item.apply_receipt_amount)).toFixed(
                    2
                );
              }
            });
            state.receipt_amount_total = total;
            // console.log("开据总额", state.receipt_amount_total);

            if (
                state.billDetail.date_modify_approve == [] ||
                state.billDetail.date_modify_approve == {}
            ) {
              state.isBillVertify = false;
            } else {
              const date_modify_approve = state.billDetail.date_modify_approve;
              state.isBillVertify =
                  store.getters.userInfo.uid == date_modify_approve?.cuser_uid &&
                  date_modify_approve.approval_status == 1;
            }

            state.billTypeTxt = detail.bill_type == 1 ? "收" : "付";
            if (detail.object_id) {
              state.attachParams.object_id = detail.object_id;
            }
            state.addDisabled =
                detail.bill_status == 0 || utils.isZero(detail.actual_retreat);
            state.latefeeDisabled = utils.isZero(detail.need_latefee);
            let ownerInfo = detail.owner_id ? {id: detail.owner_id, name: detail.owner_name } : detail?.proprietor_info?.is_new ? {
              id: detail?.proprietor_info?.id,
              name: detail?.proprietor_info?.name
            } : {};
            store.dispatch("SetMADetail", {
              bill_id: state.billId,
              bill_type: detail.bill_type,
              amount: Number(detail.actual_retreat), // 账单发生额
              latefeeAmount: Number(detail.need_latefee), // 滞纳金发生额
              receiveAmount: Number(detail.receivable_payment),
              loan_type: detail.settle_status == 4 ? "PAY" : detail.bill_type == 1 ? "INCOME" : "PAY",
              company_name: detail.owner_name,
              bill_type_txt: state.billTypeTxt,
              buildIds: detail.build_id,
              owner_id: ownerInfo?.id || '',
              issue_flag: !!detail.issue_flag,
              proprietor_id: detail.proprietor_id,
            });

            if (ownerInfo.id) {
              state.ownerInfo = ownerInfo
            }
            let room = detail?.build_bind?.room[0] || {};
            state.roomDetail = {
              ...(room.extra || {}),
              room_name: room?.room_name || "",
              id: room?.id || "",
            };

            if (state.billDetail.bill_status == 2) {
              state.split_approval = true
            }

          });
    };

    const closeAllModal = () => {
      emit("closeAllModal")
    };

    const toContractDetail = () => {
      if (state.billDetail?.contract_id) {
        state.contractDetailId = state.billDetail.contract_id;
        state.contractDetailVisible = true;
      }
    };

    const toOwnerDetail = () => {
      let ownerId = state.billDetail?.owner_id || state.billDetail?.proprietor_info?.is_new ? state.billDetail?.proprietor_info?.id : '';
      if (!ownerId) return;
      state.ownerId = ownerId;
      state.ownerDetailVisible = true;
    };

    // 开具收据
    const makeReceipt = () => {
      request
          .post("/org", "/receipt/beforeVerify", {
            billIds: [state.billId],
          })
          .then((res) => {
            window.microApp.forceDispatch({
              type: "SetChildDrawerList",
              info: {
                props: {
                  title: null,
                  maskCloseable: true,
                  visible: true,
                  closable: false,
                  width: 1200,
                  bodyStyle: {height: '100%',},
                  destroyOnClose: true,
                },
                microId: "org_receipt",
                heightFull: true,
                app: "org",
                url: `/bill/receipt?billIds=${state.billId}&isClose=true`,
                params: {
                  isMainDrawer: true,
                  closeSubmitDrawer: () => {
                    getBillDetail()
                  }
                }
              },
            })
          })
          .catch((err) => {
            if (err.code == 50024) {
              Modal.confirm({
                title: () => "提示",
                content: () =>
                    `当前勾选账单楼宇存在没有配置收据编号生成规则,请先前往配置~`,
                icon: () => createVNode(ExclamationCircleOutlined),
                centered: true,
                okText: () => "前往",
                onOk() {
                  $router.push({
                    name: "receiptSetting",
                    query: {
                      type: "ruleList",
                    },
                  });
                },
              });
            }
            if (err.code == 50025) {
              Modal.confirm({
                title: () => "提示",
                content: () =>
                    err.msg || `当前勾选账单楼宇没有配置收款方信息,请先前往配置~`,
                icon: () => createVNode(ExclamationCircleOutlined),
                centered: true,
                okText: () => "前往",
                onOk() {
                  $router.push({
                    name: "receiptSetting",
                    query: {
                      type: "sellerList",
                    },
                  });
                },
              });
            }
          });
    };
    const receipteDetail = (record) => {
      window.microApp.forceDispatch({
        type: "SetChildDrawerList",
        info: {
          props: {
            title: null,
            maskCloseable: true,
            visible: true,
            closable: false,
            width: 1200,
            bodyStyle: {height: '100%',},
            destroyOnClose: true,
          },
          microId: "org_receipt_detail",
          heightFull: true,
          app: "org",
          url: `/bill/receiptDetail?group_key=${record.group_key}&isClose=true`,
          params: {
            isMainDrawer: true,
          }
        },
      })
    };

    const formState = reactive({
      incomelate: "",
    });

    const addNoticeVisible = ref(false);
    const addPaymentNotice = () => {
      let params = [state.billId];
      request
          .post("/org", "/notice/beforeVerify", {
            billIds: params,
            needMsg: true,
          })
          .then((res) => {
            if (res.data.pass) {
              if (res?.data?.matchIds?.length) {
                addNoticeVisible.value = true;
              }
            } else {
              Modal.confirm({
                title: "提示",
                content: () => res.msg,
                icon: () => createVNode(ExclamationCircleOutlined),
                centered: true,
                okText: () => "继续",
                onOk() {
                  addNoticeVisible.value = true;
                },
              });
            }
          })
          .catch((err) => {
            // console.log(err);
            if (err.code == 60023) {
              Modal.info({
                title: "提示",
                content: () => err.msg,
                centered: true,
                okText: () => "确定",
              });
            }
          });
    };

    const addNoticeClose = () => {
      addNoticeVisible.value = false;
    };

    const addNoticeSuccess = () => {
      addNoticeClose();
    };

    const closeApproval = () => {
      state.editDateVisible = false;
    };
    const config = {
      rules: [
        {
          type: "string",
          required: true,
          message: "请选择日期!",
        },
      ],
    };
    const changeBillDate = () => {
      state.editDateVisible = true;
    };
    const commitBillDate = () => {
      if (!state.billDate) {
        message.error(`请选择新的应${state.billTypeTxt}日期`);
        return;
      }
      state.editDateVisible = false;
      request
          .put("/org", "/bill/receiveDateModify", {
            bill_id: state.billId,
            receivable_payment_date: state.billDate,
          })
          .then((res) => {
            message.success(`提交应${state.billTypeTxt}日期修改申请成功！`);
            getBillDetail();
          })
          .catch((err) => {
            console.log(err);
            if (err.code == 12001) {
              Modal.confirm({
                title: () => "提示",
                content: () =>
                    err?.msg || "您需要先设置修改日期审批流程才能提交申请哦~",
                icon: () => createVNode(ExclamationCircleOutlined),
                centered: true,
                okText: () => "前往",
                onOk() {
                  if (window.__MICRO_APP_ENVIRONMENT__) {
                    window.microApp.forceDispatch({
                      type: "SetMicroPages",
                      microInfo: {
                        microId: `org_workApproval_manage_index`,
                        app: 'workApproval',
                        name: '管理审批',
                        url: `/approval/manage/index`,
                      }
                    })
                  }
                },
              });
            }
          });
    };
    const revokes = () => {
      utils.modalConfirm({
        content: `确认撤销修改账单应${state.billTypeTxt}时间？`,
        onOk: () => {
          request
              .get("/org", "/bill/receiveDateRevoke", {
                bill_id: state.billId,
              })
              .then((res) => {
                message.success(`撤销修改账单应${state.billTypeTxt}时间成功`);
                // console.log(res)
                getBillDetail();
              });
        },
      });
    };

    const attachment = (id) => {
      request
          .get("/org", "/bill/adjustFiles", {
            adjust_id: id,
          })
          .then((res) => {
            state.files = res.list
            state.annex = true
          });
    }

    const previewUrlData = ref({});

    const previewClick = (record) => {
      if (record.file_url.indexOf('.jpg') != -1 || record.file_url.indexOf('.jpeg') != -1 || record.file_url.indexOf('.png') != -1) {
        state.imgList = [record.file_url];
        state.imgVisible = true;
      }
    };

    // 下载文件
    const downloadFile = (url) => {
      if (!url) {
        message.error("未返回文件路径，无法下载");
        return;
      }
      window.open(url);
    };


    /* 扫码支付 */
    const onMakeCollections = () => {
      state.collectVisible = true;
    };

    const handleAddTurnoverClose = () => {
      state.addBillTurnoverVisible = false;
    };

    const saveAddTurnover = () => {
      handleAddTurnoverClose();
      init();
    };

    const Splitbill = (item) => {
      state.contentbill = {
        cost_type_txt: item.cost_type_txt,
        start_date: item.start_date,
        end_date: item.end_date,
        bill_amount: item.bill_amount,
        latefee_amount: item.latefee_amount,
        diff_month: item.diff_month,
        id: item.id,
      }
      state.Splitbilltype = true
    }


    const cancelsplitbill = () => {
      state.Splitbilltype = false
      init()
    }

    const init = () => {
      if (isModal.value) {
        state.billId = props.id;
      } else {
        state.billId = $route.query.billId;
      }
      getBillDetail();
      getCurrentTurnover();
      getAdjustList();
      getRemarkList();
      getOptLogList();
      textapproval();
      state.refreshKey++;
    };
    init();

    // 收款成功
    const onCollectionsSuccess = () => {
      state.collectVisible = false;
      init();
    };

    const showUserInfo = (info, field) => {
      if (!info[field]) {
        return;
      }
      state.userId = info[field];
      state.coordinateData = window.event;
      setTimeout(() => {
        state.userVisible = true;
      }, 50);
    };

    const showCompany = (id) => {
      if (!id) return;
      state.addCompanyVisible = true;
      state.editCompanyId = id;
    };

    // 查看审批
    const handleViewApproval = (record) => {

      const approval_id = record?.operate_content?.approval_id || 0
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetChildDrawerList",
          info: {
            props: {
              title: '审批详情',
              closable: true,
              maskClosable: true,
              visible: true,
              width: 1000,
              bodyStyle: {
                height: '100%',
                boxSizing: 'border-box',
                overflowY: 'auto',
                background: '#ffffff'
              },
              destroyOnClose: true,
            },
            microId: `approvalDetailMessage`,
            app: 'workApproval',
            url: `/approval/detail?id=${approval_id}`,
            params: {
              isMainDrawer: true,
              closeApproval: () => {
                init()
              }
            }
          }
        })
      }

    };

    const handleRefundBackCancel = (isRefresh) => {
      if (isRefresh) {
        init();
      }
      state.refundBackVisible = false;
      state.refundBackActionType = '';
      state.refundBackAmount = 0;
    };

    const handleRefundBackNext = (type, isRefresh) => {
      handleRefundBackCancel(isRefresh);
      if (type === 'createStream') {
        addNewTurnover();
      } else {
        handleMatchTurnoverVisible();
      }
    };

    const handleViewRelevanceBill = (id) => {
      state.relationBillId = id;
      state.relationBillVisible = true;
    };

    const handleCloseRelationBill = () => {
      state.relationBillVisible = false;
      init();
    };

    const handleMenuMoreClick = (e) => {
      const {key} = e;
      if (key == "Splitbill") {
        Splitbill(state.billDetail)
      }
    };

    // 滚动到指定位置
  let canScroll = true
  let timer = null
  const scrollToAnchor = (key) => {
    canScroll = false
    const element = document.getElementById(key);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
      if (!timer) {
        timer =  setTimeout(() => {
          canScroll = true
          timer = null
        }, 700)
      }
    }
  };

  const contentRef = ref(null)

  // 滚动监听选择 activeKey
  const handleScroll =()=>{
    if(!canScroll){
      return
    }
    const containerEl = contentRef.value;
    const scrollTop = containerEl.scrollTop + 20;

    let nearestItem = null;
    let minDistance = Infinity;

    state.tabList.forEach((item) => {
      const itemEl = document.getElementById(`${item.key}`);
      if (!itemEl) return;

      const distance = scrollTop - itemEl.offsetTop;
      if (distance >= 0 && distance < minDistance) {
        minDistance = distance;
        nearestItem = item.key;
      }
    });

    if (nearestItem) {
      state.activeKey = nearestItem;
    }
  }
    

    return {
      isModal,
      ...toRefs(state),
      ...descStyle,
      formState,
      descCols,
      TURNOVER_COLUMNS,
      SETT_STATUS_MAP,
      BILL_LIST_COLUMNS,
      INVOICE_LIST_COLUMNS,
      REMARK_LIST_COLUMNS,
      OPT_LOG_LIST_COLUMNS,
      ADJUST_LIST_COLUMNS,
      RECEIPT_LIST_COLUMNS,
      turnoverPagination,
      adjustPagination,
      remarkPagination,
      optLogPagination,
      makeInvoiceDisabled,
      makeReceiptDisabled,
      notBack,
      handleMenuMoreClick,
      goBack,
      handleTurnoverTableChange,
      handleTurnoverCancelShowChange,
      addNewTurnover,
      handleTurnoverMatchSuccess,
      handleSubBillAddSuccess,
      customBillRow,
      handleAdjustCancelShowChange,
      handleAdjustTableChange,
      toContractDetail,
      getObjectId,
      handleRemarkTableChange,
      handleRemarkAddSuccess,
      handleOptLogTableChange,
      handleTurnoverMatchCancel,
      handleMatchCancelSuccess,
      handleAdjustAddSuccess,
      handleAdjustRemove,
      handleRemarkEdit,
      handleRemarkRemove,
      handleTopBtnClick,
      onModalSubmit,
      onModalClose,
      customTurnoverRow,
      makeInvoice,
      invoiceDetail,
      handleMatchTurnoverVisible,
      makeReceipt,
      receipteDetail,
      addPaymentNotice,
      addNoticeVisible,
      addNoticeClose,
      addNoticeSuccess,
      toOwnerDetail,
      showUserInfo,
      canCancelAdjust,
      changeBillDate,
      commitBillDate,
      revokes,
      closeApproval,
      config,
      onCollectionsSuccess,
      onMakeCollections,
      showCompany,
      attachment,
      devicecolumns,
      previewUrlData,
      previewClick,
      downloadFile,
      handleAddTurnoverClose,
      saveAddTurnover,
      textapproval,
      Splitbill,
      cancelsplitbill,
      handleViewApproval,
      disabledAdjust,
      handleRefundBackCancel,
      handleRefundBackNext,
      canActionInvoice,
      canAction,
      settleStatus4,
      handleCloseRelationBill,
      handleViewRelevanceBill,
      closeAllModal,

      scrollToAnchor,

      contentRef,
      handleScroll
    };
  },
  beforeRouteEnter(to, from, next) {
    store.dispatch("ClearMADetail");
    next();
  },
});

const SETT_STATUS_MAP = {
  1: "未付款",
  2: "已结清",
  3: "部分结清",
  4: "待退款",
  5: "待收款",
  6: "对账确认中",
  7: "已付款",
};
const descCols = {lg: 3, md: 2, xs: 1};
const descStyle = {
  labelStyle: {
    color: "rgba(0,0,0,0.5)",
    fontSize: "12px",
  },
  contentStyle: {
    color: "rgba(0,0,0,0.8)",
    marginBottom: "15px",
    overflow: "hidden",
    paddingRight: "8px",
  },
};

const TURNOVER_COLUMNS = [
  {
    title: "流水类型",
    key: "loan_type_txt",
    dataIndex: "loan_type_txt",
  },
  {
    title: "对方单位名称",
    key: "company_name",
    dataIndex: "company_name",
  },
  {
    title: "费用类型",
    key: "cost_type_txt",
    dataIndex: "cost_type_txt",
  },
  {
    title: "入账日期",
    key: "income_date",
    dataIndex: "income_date",
  },
  {
    title: "发生额",
    key: "amount",
    dataIndex: "amount",
  },
  {
    title: "退款金额",
    key: "refund_price",
    dataIndex: "refund_price",
  },
  {
    title: "匹配金额",
    key: "match_price",
    dataIndex: "match_price",
  },
  {
    title: "匹配日期",
    key: "match_date",
    dataIndex: "match_date",
  },
  {
    title: "取消匹配日期",
    key: "date",
    dataIndex: "cancel_match_date",
  },
  {
    title: "匹配状态",
    key: "match_status_txt",
    dataIndex: "match_status_txt",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "id",
  },
];
const BILL_LIST_COLUMNS = [
  {
    title: "费用类型",
    key: "cost_type_txt",
    dataIndex: "cost_type_txt",
  },
  {
    title: "应收/付金额（元）",
    key: "receivable_payment",
    dataIndex: "receivable_payment",
  },
  {
    title: "税率",
    key: "tax_rate",
    dataIndex: "tax_rate",
  },
  {
    title: "税额",
    key: "tax_amount",
    dataIndex: "tax_amount",
  },
  {
    title: "开始日期",
    key: "start_date",
    dataIndex: "start_date",
  },
  {
    title: "结束日期",
    key: "end_date",
    dataIndex: "end_date",
  },
  {
    title: "账单备注",
    key: "remark",
    dataIndex: "remark",
  },
];
const INVOICE_LIST_COLUMNS = [
  {
    title: "发票类型",
    key: "invoice_type_txt",
    dataIndex: "invoice_type_txt",
  },
  {
    title: "开票日期",
    key: "apply_invoice_time",
    dataIndex: "apply_invoice_time",
  },
  {
    title: "费用类型",
    key: "cost_info",
    dataIndex: "cost_info",
  },
  {
    title: "商品或服务名称",
    key: "tax_cost_names",
    dataIndex: "tax_cost_names",
  },
  {
    title: "申请开票金额",
    key: "apply_amounts",
    dataIndex: "apply_amounts",
  },
  {
    title: "开票类型",
    key: "issue_type_txt",
    dataIndex: "issue_type_txt",
  },
  {
    title: "发票状态",
    key: "invoice_status_txt",
    dataIndex: "invoice_status_txt",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "group_key",
  },
];
const ADJUST_LIST_COLUMNS = [
  {
    title: "调整日期",
    key: "adjust_date",
    dataIndex: "adjust_date",
  },
  {
    title: "调整类型",
    key: "adjust_type_txt",
    dataIndex: "adjust_type_txt",
  },
  {
    title: "调整方式",
    key: "adjust_mode_txt",
    dataIndex: "adjust_mode_txt",
  },
  {
    title: "调整金额（元）",
    key: "adjust_price",
    dataIndex: "adjust_price",
  },
  {
    title: "备注内容",
    key: "remark",
    dataIndex: "remark",
  },
  {
    title: "作废调整日期",
    key: "cancel_adjust_date",
    dataIndex: "cancel_adjust_date",
  },
  {
    title: "附件",
    key: "files_num",
    dataIndex: "files_num",
  },
  {
    title: "调整状态",
    key: "adjust_status_txt",
    dataIndex: "adjust_status_txt",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "id",
  },
];

const REMARK_LIST_COLUMNS = [
  {
    title: "备注人",
    key: "operate_user",
    dataIndex: "operate_user",
  },
  {
    title: "备注内容",
    key: "remark",
    dataIndex: "remark",
  },
  {
    title: "备注时间",
    key: "operate_time",
    dataIndex: "operate_time",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "id",
  },
];
const OPT_LOG_LIST_COLUMNS = [
  {
    title: "操作人",
    key: "operate_user",
    dataIndex: "operate_user",
  },
  {
    title: "操作内容",
    key: "log_content",
    dataIndex: "log_content",
  },
  {
    title: "操作时间",
    key: "operate_time",
    dataIndex: "operate_time",
  },
];
const RECEIPT_LIST_COLUMNS = [
  {
    title: "收据编号",
    dataIndex: "receipt_number",
  },
  {
    title: "开据时间",
    dataIndex: "issuer_time",
  },
  {
    title: "汇款方式",
    dataIndex: "remit_type_txt",
  },
  {
    title: "费用类型",
    dataIndex: "cost_name_txt",
  },
  {
    title: "开据金额",
    dataIndex: "apply_receipt_amount",
  },
  {
    title: "状态",
    dataIndex: "status_txt",
  },
  {
    title: "开据人",
    dataIndex: "issuer_uname",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
  },
];
</script>

<style lang="less" scoped>
.bill-detail {
  height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;

  .header {
    position: relative;
    z-index: 99;
    background: #fff;
    padding-bottom: 20px;
    margin-left: 1px;
    box-shadow: 0px 0px 4px 1px #ddd;

    &:deep(.ant-page-header) {
      padding: 8px 24px;
      border-bottom: 1px dashed #ddd;
    }

    .header-extra {
      .owner-info {
        padding: 0 40px;
        font-size: 20px;
        line-height: 50px;
        font-weight: 600;
        border-bottom: 1px dashed #ddd;
      }

      .owner-padding {
        padding: 0 24px;
      }

      .stais-info {
        padding: 0 40px;
        margin-top: 15px;

        :deep(.ant-statistic-content) {
          font-size: 20px;
        }

        :deep(.ant-statistic-title) {
          font-size: 12px;
        }
      }

      .stais-padding {
        padding: 0 24px;
      }
    }
  }

  .content {
    position: relative;
    z-index: 90;
    flex: 1;
    width: 100%;
    max-height: calc(100% - 210px);
    padding: 10px;
    padding-top: 0px;
    margin-top:10px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  &.back-class {
    :deep(.ant-page-header-back) {
      display: none;
    }
  }

  .footer {
    :deep(.ant-table-footer) {
      padding: 16px 0;
    }
  }
}

.hide-back {
  :deep(.ant-page-header-back) {
    display: none;
  }
}
</style>
